<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>贪吃3</title>
    <style>
        #canvas {
            /* width: 1500px;
            height: 1500px; */
            border: 1px solid black;
            /* margin: 150px 150px; */
        }
    </style>
</head>

<body>
    <canvas id="canvas" width="800" height="800"></canvas>
    <script>
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');
        // 封装小方块
        function Rect(x, y, color) {
            this.x = x;
            this.y = y;
            this.color = color;
            this.draw = function () {
                context.beginPath();
                context.fillStyle = this.color;
                context.rect(this.x, this.y, 20, 20);
                context.fill();
                context.stroke();
                context.closePath();
            }
        }
        // var re =new Rect(50,50,'red')
        // re.draw()

        // 封装蛇
        function Snake() {
            this.direction = 'right';
            this.x = 60;
            this.y = 0;
            this.snakeBody = [
                new Rect(60, 0, 'red'),
                new Rect(40, 0, 'gray'),
                new Rect(20, 0, 'gray'),
                new Rect(0, 0, 'gray'),
            ];
            this.draw = function () {
                for (let i = 0; i < this.snakeBody.length; i++) {
                    this.snakeBody[i].draw();
                }
            }
            // 蛇移动的方法
            this.move = function () {
                if (this.direction == 'right') {
                    this.x += 20;
                } else if (this.direction == 'left') {
                    this.x -= 20;
                } else if (this.direction == 'top') {
                    this.y -= 20;
                } else if (this.direction == 'down') {
                    this.y += 20;
                }
                var rect = new Rect(this.x, this.y, 'red');
                this.snakeBody.splice(0, 0, rect);
                if (isEat()) {
                    food = new Food();
                    // alert('吃到啦')
                } else {
                    this.snakeBody.pop();
                }
                for (var i = 1; i < this.snakeBody.length; i++) {
                    this.snakeBody[i].color = 'gray';
                }

                //  撞墙和吃自己
                // console.log(snake.snakeBody[0].x)
                // console.log(canvas.width)
                if (snake.snakeBody[0].x > canvas.width || snake.snakeBody[0].x < 0 || snake.snakeBody[0].y > canvas.height || snake.snakeBody[0].y < 0){
                    let fen = snake.snakeBody.length
                    clearInterval(timer);
                    alert('撞墙撞死啦！GAME OVER!!!'+'你只得到'+fen+"分数！")
                }
                for (var i = 1; i < snake.snakeBody.length; i++) {
                    // console.log(snake.snakeBody[i].x)
                    let fen = snake.snakeBody.length
                    if(snake.snakeBody[i].x == snake.snakeBody[0].x && snake.snakeBody[i].y == snake.snakeBody[0].y ){
                        clearInterval(timer);
                        alert(',你自己吃了自己！GAME OVER!!!!'+'你只得到'+fen+"分数！")
                    }
                    
                }
            }
            // ****
        }

        document.onkeydown = function (e) {
            if (e.keyCode == '37') {
                snake.direction = 'left';
            } else if (e.keyCode == '39') {
                snake.direction = 'right';
            } else if (e.keyCode == '38') {
                snake.direction = 'top';
            } else if (e.keyCode == '40') {
                snake.direction = 'down';
            }
        }
        // 随机食物的方法
        function Food() {
            this.x = parseInt(Math.random() * 800 / 20) * 20;
            this.y = parseInt(Math.random() * 800 / 20) * 20;
            this.draw = function () {
                context.beginPath();
                context.rect(this.x, this.y, 20, 20);
                context.fillStyle = 'gold';
                context.fill();
                context.stroke();
                context.closePath();
            }
        }
        var snake = new Snake();
        var food = new Food();
        // 判断是否吃到食物
        console.log(snake.snakeBody[0].x)
        console.log(food.x)
        function isEat() {
            if (snake.snakeBody[0].x == food.x && snake.snakeBody[0].y == food.y) {
                return true;
            } else {
                return false;
            }
        }
        var timer = setInterval(function () {
            context.clearRect(0, 0, canvas.width, canvas.height);
            snake.move();
            food.draw();
            snake.draw();
        }, 300)
    </script>
</body>

</html>